<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0px;
            text-align: center;
        }
        #reg{
            width:370px;
            border:1px solid blue;
            line-height:40px;
            margin:0 auto;
            padding-left:100px;
            padding-top:15px;
            padding-bottom:15px;
            text-align:left;
            font-size:14px;
        }
         .error{
            color:red;
        } 
    </style>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h1>用户注册</h1>
    <form method="POST" action="files.php" enctype="multipart/form-data">
    <div id="reg">
    <div>学号：<input type="text" name="stuno"><span class="error">*</span></div>
    <div> 
         相片：<input type="file" name="photo">
         <br>*上传文件大小不要超过2M，必须是.jpg、.gif、.png类型
    </div>
    <div style="margin-left: 85px;">
        <input type="submit" name="btnsubmit" value="注册">
    </div>
</div>
</form>
<script type="text/javascript">
    var elform=document.getElementsByTagName("form")[0];
    // 表单（elform）的提交事件（onsubmit）绑定一个处理函数。当用户尝试提交表单时，会触发该函数，并调用 checkdata() 方法来验证表单数据。
    elform.onsubmit=function(){     //匿名函数，在表单提交时执行,匿名函数（Anonymous Function）是指没有名称的函数，通常用于临时使用或作为参数传递给其他函数。
        return checkdata();    
    }

    function checkdata(){
        var valid=true;
        var elstuno=document.getElementsByName("stuno")[0];
        if(elstuno.value==""){
            elstuno.nextSibling.innerHTML="*学号必填";
            valid=false;
        }   
        else {
            elstuno.nextSibling.innerHTML="*";
        }

        return valid;
         }
</script>
</body>
</html>
